<script setup lang="ts">
import { isArray } from 'lodash'
import { Spin } from 'vexip-ui'
import { computed } from 'vue'

const props = defineProps<{
  contentClass?: string
  contentPadding?: string
  loading?: boolean | boolean[]
  loadingTip?: string
}>()

const isLoading = computed(() => (isArray(props.loading) ? props.loading.some((x) => x) : props.loading))
</script>

<template>
  <Spin :class="`${contentPadding ?? 'p-2'}`" :tip="loadingTip ?? 'Loading...'" :delay="200" :active="isLoading">
    <div :class="contentClass">
      <slot></slot>
    </div>
    <slot name="modals"></slot>
    <slot name="drawers"></slot>
  </Spin>
</template>
